{extend name="public/base" /}

{block name="title"}<title>奖扣任务配置</title>{/block}


{block name="pjax_container"}

<style>
    .prize-buckle {
        display: flex;
        width: 100%;
        border: 1px solid #EBEBEB;
        margin-top: 15px;
        background-color: #fff;
        box-sizing: border-box;
    }
    .prize-buckle .prize-buckle-left {
        flex: 20%;
        border-right: 1px solid #EBEBEB;
        box-sizing: border-box;
    }
    .prize-buckle .prize-buckle-left .left-hd {
    height: 67px;
    width: 100%;
    border-bottom: 1px solid #EBEBEB;
    }
    .prize-buckle .prize-buckle-left .left-hd a {
    display: block;
    font-size: 14px;
    text-decoration: none;
    height: 100%;
    padding: 0 25px;
    line-height: 67px;
    color: #1890FF;
    }
    .prize-buckle .prize-buckle-left .left-conent {
    height: 100%;
    }
    .prize-buckle .prize-buckle-left .left-conent ul {
    min-width: 160px;
    }
    .prize-buckle .prize-buckle-left .left-conent ul li {
    position: relative;
    display: flex;
    justify-content: space-between;
    height: 28px;
    margin: 10px 0;
    padding-left: 35px;
    padding-right: 15px;
    align-items: center;
    color: #595959;
    cursor: pointer;
    transition: all .3s;
    }
    .prize-buckle .prize-buckle-left .left-conent ul li::after {
    content: "";
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    border-right: 3px solid #1890FF;
    transform: scaleY(0.0001);
    opacity: 0;
    }
    .prize-buckle .prize-buckle-right {
    flex: 80%;
    padding: 0 30px;
    }
    .prize-buckle .prize-buckle-right .right-hd {
    padding: 20px 0;
    }
    .prize-buckle .prize-buckle-right .right-hd i {
    color: #FFB812;
    margin-right: 10px;
    }
    .prize-buckle .prize-buckle-right .right-hd span {
    color: #333;
    }
    .prize-buckle .prize-buckle-right .right-bd {
    padding-bottom: 80px;
    border-bottom: 1px solid #EBEBEB;
    padding-left: 35px;
    }
    .prize-buckle .prize-buckle-right .right-bd ul li:first-child {
    color: #333;
    height: 33px;
    line-height: 33px;
    }
    .prize-buckle .prize-buckle-right .right-bd ul li:first-child span {
    color: #FF4141;
    font-size: 12px;
    margin-left: 10px;
    }
    .prize-buckle .prize-buckle-right .right-bd ul li:first-child::after {
    display: inline-block;
    content: '';
    width: 11px;
    height: 11px;
    background-color: #1890FF;
    position: absolute;
    left: -3px;
    top: 11px;
    }
    .prize-buckle .prize-buckle-right .right-bd ul li {
    color: #5F5F5F;
    height: 28px;
    line-height: 28px;
    }
    .prize-buckle .prize-buckle-right .right-bd:last-child {
    border-bottom: 0;
    }
    .prize-buckle .prize-buckle-right .right-hd-box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
    }
    .prize-buckle .prize-buckle-right .right-hd-box .right-hd i {
    color: #FFB812;
    margin-right: 10px;
    }
    .prize-buckle .prize-buckle-right .right-hd-box .right-hd span {
    color: #333;
    }
    .prize-buckle .prize-buckle-right .right-hd-box .right-hd .set-tip {
    font-size: 12px;
    color: #1890FF;
    font-weight: 400;
    margin-left: 10px;
    }
    .prize-buckle .prize-buckle-right .right-hd-box .next-save-cancel,
    .prize-buckle .prize-buckle-right .right-hd-box .add-del-config,
    .prize-buckle .prize-buckle-right .right-hd-box .search-del {
    display: flex;
    align-items: center;
    }
    .prize-buckle .prize-buckle-right .right-hd-box .next-save-cancel .search-del-box,
    .prize-buckle .prize-buckle-right .right-hd-box .add-del-config .search-del-box,
    .prize-buckle .prize-buckle-right .right-hd-box .search-del .search-del-box {
    position: relative;
    margin-right: 10px;
    }
    .prize-buckle .prize-buckle-right .right-hd-box .next-save-cancel .search-del-box i,
    .prize-buckle .prize-buckle-right .right-hd-box .add-del-config .search-del-box i,
    .prize-buckle .prize-buckle-right .right-hd-box .search-del .search-del-box i {
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
    color: #666;
    cursor: pointer;
    }
    .prize-buckle .prize-buckle-right .right-hd-box .next-save-cancel .search-del-box .form-control,
    .prize-buckle .prize-buckle-right .right-hd-box .add-del-config .search-del-box .form-control,
    .prize-buckle .prize-buckle-right .right-hd-box .search-del .search-del-box .form-control {
    border-radius: 16px;
    width: 150px;
    height: 32px;
    padding-right: 25px;
    }
    .prize-buckle .prize-buckle-right .right-hd-box .next-save-cancel .btn-style,
    .prize-buckle .prize-buckle-right .right-hd-box .add-del-config .btn-style,
    .prize-buckle .prize-buckle-right .right-hd-box .search-del .btn-style {
    border-radius: 5px;
    height: 32px;
    line-height: 32px;
    }
    .prize-buckle .prize-buckle-right .right-bd-box {
    border-bottom: 1px solid #EBEBEB;
    }
    .prize-buckle .prize-buckle-right .right-bd-box .empty {
    text-align: center;
    padding: 60px 0;
    }
    .prize-buckle .prize-buckle-right .right-bd-box .empty p {
    margin-top: 15px;
    }
    .prize-buckle .prize-buckle-right .right-bd-box .next-month-person-add,
    .prize-buckle .prize-buckle-right .right-bd-box .next-month-person-not,
    .prize-buckle .prize-buckle-right .right-bd-box .current-month-person {
    display: flex;
    margin-bottom: 20px;
    flex-wrap: wrap;
    }
    .prize-buckle .prize-buckle-right .right-bd-box .next-month-person-add .person-items-add,
    .prize-buckle .prize-buckle-right .right-bd-box .next-month-person-not .person-items-add,
    .prize-buckle .prize-buckle-right .right-bd-box .current-month-person .person-items-add,
    .prize-buckle .prize-buckle-right .right-bd-box .next-month-person-add .person-items-not,
    .prize-buckle .prize-buckle-right .right-bd-box .next-month-person-not .person-items-not,
    .prize-buckle .prize-buckle-right .right-bd-box .current-month-person .person-items-not,
    .prize-buckle .prize-buckle-right .right-bd-box .next-month-person-add .person-items,
    .prize-buckle .prize-buckle-right .right-bd-box .next-month-person-not .person-items,
    .prize-buckle .prize-buckle-right .right-bd-box .current-month-person .person-items {
    position: relative;
    text-align: center;
    margin: 20px;
    padding: 15px;
    box-sizing: border-box;
    border: 1px solid transparent;
    }
    .prize-buckle .prize-buckle-right .right-bd-box .next-month-person-add .person-items-add .del-icon,
    .prize-buckle .prize-buckle-right .right-bd-box .next-month-person-not .person-items-add .del-icon,
    .prize-buckle .prize-buckle-right .right-bd-box .current-month-person .person-items-add .del-icon,
    .prize-buckle .prize-buckle-right .right-bd-box .next-month-person-add .person-items-not .del-icon,
    .prize-buckle .prize-buckle-right .right-bd-box .next-month-person-not .person-items-not .del-icon,
    .prize-buckle .prize-buckle-right .right-bd-box .current-month-person .person-items-not .del-icon,
    .prize-buckle .prize-buckle-right .right-bd-box .next-month-person-add .person-items .del-icon,
    .prize-buckle .prize-buckle-right .right-bd-box .next-month-person-not .person-items .del-icon,
    .prize-buckle .prize-buckle-right .right-bd-box .current-month-person .person-items .del-icon {
    display: none;
    position: absolute;
    top: -11px;
    right: -11px;
    font-size: 20px;
    color: #FF4141;
    cursor: pointer;
    }
    .prize-buckle .prize-buckle-right .right-bd-box .next-month-person-add .person-items-add .person-items-pic-add,
    .prize-buckle .prize-buckle-right .right-bd-box .next-month-person-not .person-items-add .person-items-pic-add,
    .prize-buckle .prize-buckle-right .right-bd-box .current-month-person .person-items-add .person-items-pic-add,
    .prize-buckle .prize-buckle-right .right-bd-box .next-month-person-add .person-items-not .person-items-pic-add,
    .prize-buckle .prize-buckle-right .right-bd-box .next-month-person-not .person-items-not .person-items-pic-add,
    .prize-buckle .prize-buckle-right .right-bd-box .current-month-person .person-items-not .person-items-pic-add,
    .prize-buckle .prize-buckle-right .right-bd-box .next-month-person-add .person-items .person-items-pic-add,
    .prize-buckle .prize-buckle-right .right-bd-box .next-month-person-not .person-items .person-items-pic-add,
    .prize-buckle .prize-buckle-right .right-bd-box .current-month-person .person-items .person-items-pic-add,
    .prize-buckle .prize-buckle-right .right-bd-box .next-month-person-add .person-items-add .person-items-pic-not,
    .prize-buckle .prize-buckle-right .right-bd-box .next-month-person-not .person-items-add .person-items-pic-not,
    .prize-buckle .prize-buckle-right .right-bd-box .current-month-person .person-items-add .person-items-pic-not,
    .prize-buckle .prize-buckle-right .right-bd-box .next-month-person-add .person-items-not .person-items-pic-not,
    .prize-buckle .prize-buckle-right .right-bd-box .next-month-person-not .person-items-not .person-items-pic-not,
    .prize-buckle .prize-buckle-right .right-bd-box .current-month-person .person-items-not .person-items-pic-not,
    .prize-buckle .prize-buckle-right .right-bd-box .next-month-person-add .person-items .person-items-pic-not,
    .prize-buckle .prize-buckle-right .right-bd-box .next-month-person-not .person-items .person-items-pic-not,
    .prize-buckle .prize-buckle-right .right-bd-box .current-month-person .person-items .person-items-pic-not,
    .prize-buckle .prize-buckle-right .right-bd-box .next-month-person-add .person-items-add .person-items-pic,
    .prize-buckle .prize-buckle-right .right-bd-box .next-month-person-not .person-items-add .person-items-pic,
    .prize-buckle .prize-buckle-right .right-bd-box .current-month-person .person-items-add .person-items-pic,
    .prize-buckle .prize-buckle-right .right-bd-box .next-month-person-add .person-items-not .person-items-pic,
    .prize-buckle .prize-buckle-right .right-bd-box .next-month-person-not .person-items-not .person-items-pic,
    .prize-buckle .prize-buckle-right .right-bd-box .current-month-person .person-items-not .person-items-pic,
    .prize-buckle .prize-buckle-right .right-bd-box .next-month-person-add .person-items .person-items-pic,
    .prize-buckle .prize-buckle-right .right-bd-box .next-month-person-not .person-items .person-items-pic,
    .prize-buckle .prize-buckle-right .right-bd-box .current-month-person .person-items .person-items-pic {
    width: 70px;
    height: 70px;
    border: 3px solid #EBEBEB;
    border-radius: 50%;
    }
    .prize-buckle .prize-buckle-right .right-bd-box .next-month-person-add .person-items-add .person-items-name-add,
    .prize-buckle .prize-buckle-right .right-bd-box .next-month-person-not .person-items-add .person-items-name-add,
    .prize-buckle .prize-buckle-right .right-bd-box .current-month-person .person-items-add .person-items-name-add,
    .prize-buckle .prize-buckle-right .right-bd-box .next-month-person-add .person-items-not .person-items-name-add,
    .prize-buckle .prize-buckle-right .right-bd-box .next-month-person-not .person-items-not .person-items-name-add,
    .prize-buckle .prize-buckle-right .right-bd-box .current-month-person .person-items-not .person-items-name-add,
    .prize-buckle .prize-buckle-right .right-bd-box .next-month-person-add .person-items .person-items-name-add,
    .prize-buckle .prize-buckle-right .right-bd-box .next-month-person-not .person-items .person-items-name-add,
    .prize-buckle .prize-buckle-right .right-bd-box .current-month-person .person-items .person-items-name-add,
    .prize-buckle .prize-buckle-right .right-bd-box .next-month-person-add .person-items-add .person-items-name-not,
    .prize-buckle .prize-buckle-right .right-bd-box .next-month-person-not .person-items-add .person-items-name-not,
    .prize-buckle .prize-buckle-right .right-bd-box .current-month-person .person-items-add .person-items-name-not,
    .prize-buckle .prize-buckle-right .right-bd-box .next-month-person-add .person-items-not .person-items-name-not,
    .prize-buckle .prize-buckle-right .right-bd-box .next-month-person-not .person-items-not .person-items-name-not,
    .prize-buckle .prize-buckle-right .right-bd-box .current-month-person .person-items-not .person-items-name-not,
    .prize-buckle .prize-buckle-right .right-bd-box .next-month-person-add .person-items .person-items-name-not,
    .prize-buckle .prize-buckle-right .right-bd-box .next-month-person-not .person-items .person-items-name-not,
    .prize-buckle .prize-buckle-right .right-bd-box .current-month-person .person-items .person-items-name-not,
    .prize-buckle .prize-buckle-right .right-bd-box .next-month-person-add .person-items-add .person-items-name,
    .prize-buckle .prize-buckle-right .right-bd-box .next-month-person-not .person-items-add .person-items-name,
    .prize-buckle .prize-buckle-right .right-bd-box .current-month-person .person-items-add .person-items-name,
    .prize-buckle .prize-buckle-right .right-bd-box .next-month-person-add .person-items-not .person-items-name,
    .prize-buckle .prize-buckle-right .right-bd-box .next-month-person-not .person-items-not .person-items-name,
    .prize-buckle .prize-buckle-right .right-bd-box .current-month-person .person-items-not .person-items-name,
    .prize-buckle .prize-buckle-right .right-bd-box .next-month-person-add .person-items .person-items-name,
    .prize-buckle .prize-buckle-right .right-bd-box .next-month-person-not .person-items .person-items-name,
    .prize-buckle .prize-buckle-right .right-bd-box .current-month-person .person-items .person-items-name {
    margin: 10px 0 0;
    color: #666;
    font-size: 12px;
    }
    .prize-buckle .prize-buckle-right .right-bd-box .next-month-person-add .person-items-add .person-items-dpm-add,
    .prize-buckle .prize-buckle-right .right-bd-box .next-month-person-not .person-items-add .person-items-dpm-add,
    .prize-buckle .prize-buckle-right .right-bd-box .current-month-person .person-items-add .person-items-dpm-add,
    .prize-buckle .prize-buckle-right .right-bd-box .next-month-person-add .person-items-not .person-items-dpm-add,
    .prize-buckle .prize-buckle-right .right-bd-box .next-month-person-not .person-items-not .person-items-dpm-add,
    .prize-buckle .prize-buckle-right .right-bd-box .current-month-person .person-items-not .person-items-dpm-add,
    .prize-buckle .prize-buckle-right .right-bd-box .next-month-person-add .person-items .person-items-dpm-add,
    .prize-buckle .prize-buckle-right .right-bd-box .next-month-person-not .person-items .person-items-dpm-add,
    .prize-buckle .prize-buckle-right .right-bd-box .current-month-person .person-items .person-items-dpm-add,
    .prize-buckle .prize-buckle-right .right-bd-box .next-month-person-add .person-items-add .person-items-dpm-not,
    .prize-buckle .prize-buckle-right .right-bd-box .next-month-person-not .person-items-add .person-items-dpm-not,
    .prize-buckle .prize-buckle-right .right-bd-box .current-month-person .person-items-add .person-items-dpm-not,
    .prize-buckle .prize-buckle-right .right-bd-box .next-month-person-add .person-items-not .person-items-dpm-not,
    .prize-buckle .prize-buckle-right .right-bd-box .next-month-person-not .person-items-not .person-items-dpm-not,
    .prize-buckle .prize-buckle-right .right-bd-box .current-month-person .person-items-not .person-items-dpm-not,
    .prize-buckle .prize-buckle-right .right-bd-box .next-month-person-add .person-items .person-items-dpm-not,
    .prize-buckle .prize-buckle-right .right-bd-box .next-month-person-not .person-items .person-items-dpm-not,
    .prize-buckle .prize-buckle-right .right-bd-box .current-month-person .person-items .person-items-dpm-not,
    .prize-buckle .prize-buckle-right .right-bd-box .next-month-person-add .person-items-add .person-items-dpm,
    .prize-buckle .prize-buckle-right .right-bd-box .next-month-person-not .person-items-add .person-items-dpm,
    .prize-buckle .prize-buckle-right .right-bd-box .current-month-person .person-items-add .person-items-dpm,
    .prize-buckle .prize-buckle-right .right-bd-box .next-month-person-add .person-items-not .person-items-dpm,
    .prize-buckle .prize-buckle-right .right-bd-box .next-month-person-not .person-items-not .person-items-dpm,
    .prize-buckle .prize-buckle-right .right-bd-box .current-month-person .person-items-not .person-items-dpm,
    .prize-buckle .prize-buckle-right .right-bd-box .next-month-person-add .person-items .person-items-dpm,
    .prize-buckle .prize-buckle-right .right-bd-box .next-month-person-not .person-items .person-items-dpm,
    .prize-buckle .prize-buckle-right .right-bd-box .current-month-person .person-items .person-items-dpm {
    font-size: 14px;
    color: #A1A1A1;
    margin: 0;
    }
    .prize-buckle .prize-buckle-right .right-bd-box .person-page {
    text-align: right;
    margin-bottom: 20px;
    }
    .prize-buckle .prize-buckle-right .right-bd-box .person-page .layui-laypage .layui-laypage-curr .layui-laypage-em {
    background-color: #1E9FFF;
    }
    .prize-buckle .prize-buckle-right .person-box-two p {
    margin: 0 0 30px 26px;
    }
    .content #personTip {
    position: fixed;
    z-index: 999;
    left: 50%;
    top: 66px;
    transform: translateX(-50%);
    padding: 10px 50px;
    background-color: #ffbf1e!important;
    border-radius: 7px;
    }
    #delTipwindow {
    height: 100%;
    padding: 20px 40px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    }
    #delTipwindow .current-month-person-del {
    display: flex;
    }
    #delTipwindow .current-month-person-del .person-items-del {
    position: relative;
    text-align: center;
    margin: 10px;
    border: 1px dashed #e8e8e8;
    padding: 15px;
    }
    #delTipwindow .current-month-person-del .person-items-del .del-icon {
    position: absolute;
    top: -11px;
    right: -11px;
    font-size: 20px;
    color: #FF4141;
    cursor: pointer;
    }
    #delTipwindow .current-month-person-del .person-items-del .person-items-del-pic {
    width: 70px;
    height: 70px;
    border: 3px solid #EBEBEB;
    border-radius: 50%;
    }
    #delTipwindow .current-month-person-del .person-items-del .person-items-del-name {
    margin: 10px 0 0;
    color: #666;
    font-size: 12px;
    }
    #delTipwindow .current-month-person-del .person-items-del .person-items-del-dpm {
    margin: 5px 0 0;
    font-size: 14px;
    color: #A1A1A1;
    }
    #delTipwindow .save-cancel {
    text-align: right;
    }
    #delTipwindow .save-cancel button {
    border-radius: 7px;
    height: 32px;
    line-height: 32px;
    }

    /* 分割线 */
    .an_tree {
  line-height: 22px;
  margin-top: 10px;
}

.an_tree_set {
  width: 100%;
  position: relative;
}

.an_tree_entry {
  height: 100%;
  width: 100%;
  padding: 3px 0;
  line-height: 24px;
}

.an_tree_main {
  cursor: pointer;
  padding-right: 10px;
  display: flex;
  align-items: center;
}

.an_tree_icon {
  position: relative;
  display: inline-block;
  width: 28px;
  height: 20px;
  line-height: 20px;
  color: #c0c4cc;
  text-align: right;
}

.an_tree_icon i {
  padding: 0 5px;
}

.an_tree_txt {
  display: inline-block;
  vertical-align: middle;
  color: #555;
  padding: 0 5px;
}

.an_tree_txt:hover {
  background-color: #e6f7ff;
}

.an_tree_txt:active {
  background-color: #e6f7ff;
}

.tree_txt_active {
  background-color: #e6f7ff;
}

.an_tree_pack {
  display: none;
  padding-left: 20px;
  position: relative;
}

.an_tree_list {
  padding: 0;
}

.an_list_title {
  height: 30px;
  line-height: 30px;
  padding: 0 10px;
}

.an_list_item {
  display: flex;
  align-items: center;
  padding: 0 10px;
  height: 30px;
  line-height: 30px;
  cursor: pointer;
}

.an_list_item .item_box {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: auto;
  width: 16px;
  height: 16px;
  border-radius: 2px;
  border: 1px solid #d9d9d9;
}

.an_list_item .item_box i {
  display: none;
  color: #fff;
}

.an_list_item .item_info span {
  margin-right: 5px;
}

.an_list_item:hover {
  background: #f2f8ff;
  color: #1890ff;
}

.list_item_check {
  background: #f2f8ff;
  color: #1890ff;
}

.list_item_check .item_box {
  background-color: #1890ff;
  border-color: #1890ff;
}

.list_item_check .item_box i {
  display: block;
  content: "\f00c";
}

.search_show {
  display: flex;
  flex-direction: column;
  padding: 20px 10px;
}

.search_show .an_tree_txt {
  padding: 5px 0;
  cursor: pointer;
}

#myModal_multiple .modal-dialog {
  width: 855px;
}

#myModal_multiple .modal-content {
  width: 855px;
}

#myModal_multiple .multiresult_header {
  height: 40px;
  line-height: 40px;
  padding: 0 10px;
  display: flex;
  background: #f5f5f9;
}

#myModal_multiple .multiresult_header .header_clear {
  margin-left: auto;
  cursor: pointer;
  color: #1890ff;
}

#myModal_multiple .an_list_title {
  display: flex;
  align-items: center;
}

#myModal_multiple .an_list_title .all_item_box {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: auto;
  width: 16px;
  height: 16px;
  border-radius: 2px;
  border: 1px solid #d9d9d9;
  cursor: pointer;
}

#myModal_multiple .an_list_title .all_item_box i {
  display: none;
  color: #fff;
}

#myModal_multiple .an_list_title .all_item_box_check {
  background-color: #1890ff;
  border-color: #1890ff;
}

#myModal_multiple .an_list_title .all_item_box_check i {
  display: block;
  content: "\f00c";
}

#myModal_multiple .multiresult_list .an_list_item .item_box {
  border: none;
}

#myModal_multiple .multiresult_list .an_list_item .item_box i {
  color: #1890ff;
}

#myModal_multiple .multiresult_list .an_list_item:hover .item_box i {
  display: block;
}

#myModal_things .table-left,
#myModal_things_multiple .table-left {
  width: 34%;
}

#myModal_things .table-right,
#myModal_things_multiple .table-right {
  width: 64%;
}

#myModal_things .an_list_item,
#myModal_things_multiple .an_list_item {
  height: 58px;
  padding: 5px 10px;
}

#myModal_things .an_list_item .item_box,
#myModal_things_multiple .an_list_item .item_box {
  margin-left: 0px;
  margin-right: 10px;
}

#myModal_things .an_list_item .item_info .name,
#myModal_things_multiple .an_list_item .item_info .name {
  color: #333;
}

#myModal_things .an_list_item .item_info span,
#myModal_things_multiple .an_list_item .item_info span {
  display: inherit;
  line-height: 24px;
  color: #bbb;
}

#myModal_things .multiresult_header,
#myModal_things_multiple .multiresult_header {
  height: 40px;
  line-height: 40px;
  padding: 0 10px;
  display: flex;
  background: #f5f5f9;
}

#myModal_things .multiresult_header .header_clear,
#myModal_things_multiple .multiresult_header .header_clear {
  margin-left: auto;
  cursor: pointer;
  color: #1890ff;
}

#myModal_things .multiresult_list .an_list_item,
#myModal_things_multiple .multiresult_list .an_list_item {
  display: flex;
  align-items: center;
  padding: 0 10px;
  height: 30px;
  line-height: 30px;
  cursor: pointer;
}

#myModal_things .multiresult_list .an_list_item .item_box,
#myModal_things_multiple .multiresult_list .an_list_item .item_box {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: auto;
  margin-right: 0px;
  width: 16px;
  height: 16px;
  border-radius: 2px;
  border: none;
}

#myModal_things .multiresult_list .an_list_item .item_box i,
#myModal_things_multiple .multiresult_list .an_list_item .item_box i {
  display: none;
  color: #1890ff;
}

#myModal_things .multiresult_list .an_list_item .item_info,
#myModal_things_multiple .multiresult_list .an_list_item .item_info {
  display: flex;
  align-items: center;
  max-width: 210px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

#myModal_things .multiresult_list .an_list_item .item_info span,
#myModal_things_multiple .multiresult_list .an_list_item .item_info span {
  margin-right: 5px;
  color: #333;
}

#myModal_things .multiresult_list .an_list_item:hover,
#myModal_things_multiple .multiresult_list .an_list_item:hover {
  background: #f2f8ff;
  color: #1890ff;
}

#myModal_things .multiresult_list .an_list_item:hover .name,
#myModal_things_multiple .multiresult_list .an_list_item:hover .name {
  color: #1890ff;
}

#myModal_things .multiresult_list .an_list_item:hover .item_box i,
#myModal_things_multiple .multiresult_list .an_list_item:hover .item_box i {
  display: block;
}

#myModal_things .multiresult_list .an_list_item:hover .item_info span,
#myModal_things_multiple .multiresult_list .an_list_item:hover .item_info span {
  color: #1890ff;
}

#myModal_things .multiresult_list .list_item_check,
#myModal_things_multiple .multiresult_list .list_item_check {
  background: #f2f8ff;
  color: #1890ff;
}

#myModal_things .multiresult_list .list_item_check .item_box,
#myModal_things_multiple .multiresult_list .list_item_check .item_box {
  background-color: #1890ff;
  border-color: #1890ff;
}

#myModal_things .multiresult_list .list_item_check .item_box i,
#myModal_things_multiple .multiresult_list .list_item_check .item_box i {
  display: block;
}

#myModal_things .list_item_check .item_info .name,
#myModal_things_multiple .list_item_check .item_info .name {
  color: #1890ff;
}

#myModal_things .list_item_check .item_info span,
#myModal_things_multiple .list_item_check .item_info span {
  display: inherit;
  line-height: 24px;
  color: #1890ff;
}

#myModal_things .content_tips,
#myModal_things_multiple .content_tips {
  display: none;
  position: absolute;
  top: 0;
  max-width: 400px;
  line-height: 18px;
  background: #fff;
  padding: 8px;
  border: 1px solid #dadada;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  color: rgba(0, 0, 0, 0.65);
  border-radius: 4px;
  transform: translate(-50%, 20px);
}

#myModal_things .content_tips span,
#myModal_things_multiple .content_tips span {
  color: #bbb;
}

#myModal_things .content_tips p,
#myModal_things_multiple .content_tips p {
  margin: 0;
}

.organization_index {
  font-size: 20px;
  width: 700px;
}

.organization_index .an_tree_entry {
  line-height: 32px;
}

.organization_index .btn-primary {
  position: absolute;
  right: 70px;
  /* height: 30px; */
}

.organization_index .btn-danger {
  position: absolute;
  right: 0;
}

.myModal_things_type .table-left {
  width: 34%;
}

.myModal_things_type .table-right {
  width: 64%;
}

.myModal_things_type .an_list_item {
  height: 58px;
  padding: 5px 10px;
}

.myModal_things_type .an_list_item .item_box {
  margin-left: 0px;
  margin-right: 10px;
}

.myModal_things_type .an_list_item .item_info .name {
  color: #333;
}

.myModal_things_type .an_list_item .item_info span {
  display: inherit;
  line-height: 24px;
  color: #bbb;
}

.myModal_things_type .list_item_check .item_info .name {
  color: #1890ff;
}

.myModal_things_type .list_item_check .item_info span {
  display: inherit;
  line-height: 24px;
  color: #1890ff;
}

.myModal_things_type .content_tips {
  display: none;
  position: absolute;
  top: 0;
  max-width: 400px;
  line-height: 18px;
  background: #fff;
  padding: 8px;
  border: 1px solid #dadada;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  color: rgba(0, 0, 0, 0.65);
  border-radius: 4px;
  transform: translate(-50%, 20px);
}

.myModal_things_type .content_tips span {
  color: #bbb;
}

.myModal_things_type .content_tips p {
  margin: 0;
}


    /* 分割线 */
    tr>th,
    td {
        text-align: center;
    }

    .btn-group-xs>.btn,
    .btn-xs {
        padding: 5px;
        margin: 0 5px;
    }
    .content-header>.breadcrumb>li {
        color: #999;
    }

    .content-header>.breadcrumb>.active {
        color: #666;
    }

    .content-header {
        height: 51px;

    }

    .btn-primary {
        background-color: #1890FF;
        color: #fff;
        border: none;
        border-radius: 6px !important;
        margin-left: 15px;
        padding: 5px 10px;
    }

    .box-primary {
        border-top-color: #ecf0f5 !important;
        border-top-width: 16px;

    }

    .btn-primary:hover {
        background-color: #1890FF;
        color: #fff;
        border: none;
        opacity: .9;
        border-radius: 6px !important;
    }

    .delete-one {
        background-color: #ff4141 !important;
        margin-left: 15px;
        border-radius: 6px;
    }

    .sreachs {
        background-color: #1890FF;
        color: #fff;
        border: none;
        border-radius: 6px !important;
        margin-left: 15px;
        padding: 7px 15px;
    }

    .change {
        background-color: #E6F7FF;
        color: #1890FF !important;
        font-weight: 700;
    }

    .del-change {
        border: 1px dashed #e8e8e8 !important;
    }

    .del-change-icon {
        display: block;
    }

    .prize-buckle .prize-buckle-left .left-conent ul li:hover {
        color: #1890FF;
    }

    /* 弹窗样式，颜学军公共部分 */
    .modal-content {
        /* margin-top: 150px; */
        width: 600px;
        height: 690px;

    }

    .modal-body {
        padding: 27px;
        width: 856px;
        height: 570px;
        display: flex;
    }

    .modal-right {
        flex: 1;
        border: 1px solid #eee;
        margin-left: 30px;
    }

    .modal-left {
        height: 100%;
    }

    .modal-right>h4 {
        width: 100%;
        display: flex;
        justify-content: space-around;
    }

    .form-control {
        border-radius: 6px;
    }

    .table-body {
        width: 540px;
        height: 462px;
        border-radius: 6px;
        background-color: #eee;
    }

    .table-left {
        margin-right: 2%;
        width: 49%;
        height: 100%;
        float: left;
        border: 1px solid #eee;
        background-color: #fff;
    }

    .table-right,
    .table-right2 {
        width: 49%;
        height: 100%;
        border: 1px solid #eee;
        float: left;
        padding-top: 10px;
        background-color: #fff;
    }
    /* an新增删除恢复功能按钮 */
    #leftBar li:hover .rwpz_del,#leftBar li:hover .rwpz_res{
        display: block;
    }
    .rwpz_del,.rwpz_res{
        display: none;
        border: 1px solid #1890FF;
        border-radius: 5px;
        padding:0 5px;
        color: #1890FF;
    }
</style>

<section class="content-header">
    <ol class="breadcrumb">
        <li>奖扣任务</li>
        <li class="active">奖扣任务配置</li>
    </ol>
</section>
<section class="content" style="overflow:hidden">
    <div class="alert alert-warning" role="alert" id="personTip" style="display: none">没有人员可以删除~</div>

    <div class="row">
        <div class="col-md-12">
            <div class="prize-buckle">
                <!-- 本月配置id -->
                <input type="hidden" name="id" value="{$id}" id="currentId">
                <!-- 下月配置id -->
                <input type="hidden" name="next_id" value="{$next_id}" id="nextId">
                <!-- 左侧侧边栏 -->
                <div class="prize-buckle-left">
                    <div class="left-hd">
                        <a href="{:url('config_edit')}">+ 新增任务配置</a>
                    </div>
                    <div class="left-conent" id="leftBar">
                        <ul>
                            {volist name="$list" id="vo"}
                            <li {if condition="input('id',$list[0]['id']) == $vo.id" } class="change" {/if} data-id="{$vo.id}">{$vo.name}
                                <!-- <i class="glyphicon glyphicon-menu-hamburger"></i> -->
                                {if condition="$vo.is_del == 0"}<span class="rwpz_del">删除</span>{else:}
                                <span class="rwpz_res">恢复</span>{/if}
                            </li>
                            {/volist}
                        </ul>
                    </div>
                </div>
                <!-- 右侧 tab -->
                <div class="prize-buckle-right">
                    <div class="right-hd">
                        <i class="glyphicon
                            glyphicon glyphicon-tags"></i>
                        <span>配置名称：{$list_now.name}</span>
                    </div>
                    <div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">
                        <ul class="layui-tab-title" id="tabs">
                            <li class="layui-this">配置</li>
                            <li>人员</li>
                        </ul>
                        <!-- tab栏配置内容 -->
                        <div class="layui-tab-content" style="padding: 0" id="tabConfig">
                            <div class="right-hd">
                                <i class="glyphicon glyphicon glyphicon-tags"></i>
                                <span>本月配置</span>
                            </div>
                            <div class="right-bd">
                                <div class="container-fluid">
                                    <div class="row">
                                        <div class=".col-lg-3 col-md-6 .col-sm-6">
                                            <ul>
                                                <li>奖分任务{if condition="$list_now.is_integral == 0"}<span>未设置</span>{/if}
                                                </li>
                                                <li>奖分下限：{$list_now.integral_reward} </li>
                                                <li>奖扣周期：{if condition="$list_now.integral_type == 0"}周任务{else:}月任务{/if}
                                                </li>
                                                <li>未完成扣分：差额扣分</li>
                                            </ul>
                                        </div>
                                        <div class=".col-lg-3 col-md-6 .col-sm-6">
                                            <ul>
                                                <li>扣分任务{if condition="$list_now.is_integral == 0"}<span>未设置</span>{/if}
                                                </li>
                                                <li>扣分下限：{$list_now.integral_deduct} </li>
                                                <li>奖扣周期：{if condition="$list_now.integral_type == 0"}周任务{else:}月任务{/if}
                                                </li>
                                                <li>未完成扣分：差额扣分</li>
                                            </ul>
                                        </div>
                                        <div class=".col-lg-3 col-md-6 .col-sm-6">
                                            <ul>
                                                <li>人次任务{if condition="$list_now.is_man == 0"}<span>未设置</span>{/if}</li>
                                                <li>奖扣人次：{$list_now.man_num} </li>
                                                <li>奖扣周期：{if condition="$list_now.man_type == 1"}日{elseif
                                                    condition="$list_now.man_type == 2"}周任务{else:}月任务{/if}</li>
                                                <li>未完成扣分：{$list_now.man_deduct}</li>
                                            </ul>
                                        </div>
                                        <div class=".col-lg-3 col-md-6 .col-sm-6">
                                            <ul>
                                                <li>奖扣比例任务{if condition="$list_now.is_rate == 0"}<span>未设置</span>{/if}
                                                </li>
                                                <li>奖扣比例：{$list_now.rate}% </li>
                                                <li>任务周期：月任务</li>
                                                <li>未完成扣分：差额扣分</li>
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="right-hd-box">
                                <div class="right-hd " style="padding-top: 30px;">
                                    <i class="glyphicon glyphicon glyphicon-tags"></i>
                                    <span>设置下月任务配置变更 <b class="set-tip">变更的任务配置将在下月生效</b> </span>
                                </div>
                                <button class="layui-btn layui-btn-normal btn-style " style="border-radius: 5px; height: 32px;
                                line-height: 32px;"><a href="{:url('config_next_edit',['id'=>$id])}" style="color: #fff">变更下月配置</a></button>
                            </div>
                            <div class="right-bd">
                                <div class="container-fluid">
                                    <div class="row">
                                        <div class=".col-lg-3 col-md-6 .col-sm-6">
                                            <ul>
                                                <li>奖分任务{if condition="$list_next.is_integral ==
                                                    0"}<span>未设置</span>{/if}</li>
                                                <li>奖分下限：{$list_next.integral_reward} </li>
                                                <li>奖扣周期：{if condition="$list_next.integral_type ==
                                                    0"}周任务{else:}月任务{/if}</li>
                                                <li>未完成扣分：差额扣分</li>
                                            </ul>
                                        </div>
                                        <div class=".col-lg-3 col-md-6 .col-sm-6">
                                            <ul>
                                                <li>扣分任务{if condition="$list_next.is_integral ==
                                                    0"}<span>未设置</span>{/if}</li>
                                                <li>扣分下限：{$list_next.integral_deduct} </li>
                                                <li>奖扣周期：{if condition="$list_next.integral_type ==
                                                    0"}周任务{else:}月任务{/if}</li>
                                                <li>未完成扣分：差额扣分</li>
                                            </ul>
                                        </div>
                                        <div class=".col-lg-3 col-md-6 .col-sm-6">
                                            <ul>
                                                <li>人次任务{if condition="$list_next.is_man == 0"}<span>未设置</span>{/if}
                                                </li>
                                                <li>奖扣人次：{$list_next.man_num} </li>
                                                <li>奖扣周期：{if condition="$list_next.man_type == 1"}日任务{elseif
                                                    condition="$list_next.man_type == 2"}周任务{else:}月任务{/if}</li>
                                                <li>未完成扣分：{$list_next.man_deduct}</li>
                                            </ul>
                                        </div>
                                        <div class=".col-lg-3 col-md-6 .col-sm-6">
                                            <ul>
                                                <li>奖扣比例任务{if condition="$list_next.is_rate == 0"}<span>未设置</span>{/if}
                                                </li>
                                                <li>奖扣比例：{$list_next.rate}% </li>
                                                <li>任务周期：月任务</li>
                                                <li>未完成扣分：差额扣分</li>
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- tab栏人员内容 -->
                        <div class="layui-tab-content" id="tabPerson" style="display: none">
                            <!-- 本月考核人员 -->
                            <div class="person-box-one">
                                <div class="right-hd-box">
                                    <div class="right-hd" style="padding-top: 30px;">
                                        <i class="glyphicon glyphicon glyphicon-tags"></i>
                                        <span>本月考核人员 （ <span id="currentNum">{$users_data.count}</span> ）</span>
                                    </div>
                                    <div class="search-del">
                                        <div class="search-del-box">
                                            <i class="glyphicon glyphicon glyphicon-search" id="searchBtn"></i>
                                            <input type="search" name="" id="searchName" class="form-control" value=""
                                                required="required" title="" placeholder="搜索姓名">
                                        </div>
                                        <button class="layui-btn layui-btn-normal btn-style"
                                            id="delPerson">删除人员</button>
                                    </div>
                                </div>
                                <div class="right-bd-box">
                                    <!-- 本月人员 -->
                                    <div class="current-month-person" id="users_data">
                                        {volist name="$users_data.list" id="vo"}
                                        <div class="person-items" data-id="{$vo.user_id}">
                                            <img src="{$vo.avatar??'/static/avatar.jpg'}" alt="" class="person-items-pic">
                                            <p class="person-items-name">{$vo.name}</p>
                                            <p class="person-items-dpm">{$vo.department_name}</p>
                                        </div>
                                        {/volist}
                                    </div>
                                    {if condition="empty($users_data.list)"}
                                    <div class="empty" id="empty1">
                                        <img src="__STATIC__/upload/empty.png" alt="">
                                        <p>暂无数据~</p>
                                    </div>
                                    {/if}
                                    <div class="empty" id="empty11" style="display: none">
                                        <img src="__STATIC__/upload/empty.png" alt="">
                                        <p>暂无数据~</p>
                                    </div>
                                    <!-- 分页 -->
                                    <div class="person-page">
                                        <!-- <div id="pagin"></div> -->
                                        <div class="table-paging" id="paging">
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!-- 下月考核人员 -->
                            <div class="person-box-two">
                                <div class="right-hd-box">
                                    <div class="right-hd" style="padding-top: 30px;">
                                        <i class="glyphicon glyphicon glyphicon-tags"></i>
                                        <span>设置下月考核人员变更</span>
                                    </div>
                                    <div class="add-del-config">
                                        <button class="layui-btn layui-btn-normal btn-style"
                                            id="nextMonthPerson">删除人员</button>
                                        <button class="layui-btn layui-btn-normal btn-style add_take">添加人员</button>
<!--                                        <button class="layui-btn layui-btn-normal btn-style" style="margin-left: 10px">配置人员导入</button>-->
                                    </div>
                                    <div class="next-save-cancel" style="display: none">
                                        <button class="layui-btn layui-btn-normal btn-style"
                                            id="nextMonthSaveDel">保存</button>
                                        <button class="layui-btn layui-btn-primary btn-style"
                                            id="nextMonthCancelDel">取消</button>
                                    </div>
                                </div>
                                <p class="person-title">下月不参与考核人员（ <span id="nextNotNum"></span> ）</p>
                                <div class="right-bd-box" style="border-bottom: 0">
                                    <div class="next-month-person-not" id="next-month-person-not">
                                        <!-- 暂无数据 -->
                                        {volist name="$users_next_not" id="vo"}
                                        <!-- 下月不参与考核人员 -->
                                        <div class="person-items-not marks" data-id="{$vo.user_id}">
                                            <i class="glyphicon glyphicon-remove-sign del-icon" id="delIcon"></i>
                                            <img src="{$vo.avatar??'/static/avatar.jpg'}" alt="" class="person-items-pic">
                                            <p class="person-items-name-not">{$vo.name}</p>
                                            <p class="person-items-dpm-not">{$vo.department_name}</p>
                                        </div>
                                        {/volist}
                                    </div>
                                    {if condition="empty($users_next_not)"}
                                    <div class="empty" id="empty2">
                                        <img src="__STATIC__/upload/empty.png" alt="">
                                        <p>暂无数据~</p>
                                    </div>
                                    {/if}
                                </div>
                                <p class="person-title">下月新增考核人员 （ <span id="nextAddNum"></span> ）</p>
                                <div class="right-bd-box">
                                    <!-- 下月考核新增人员 -->
                                    <div class="next-month-person-add">
                                        {volist name="$users_next_add" id="vo"}
                                        <div class="person-items-add marks" data-id="{$vo.user_id}">
                                            <i class="glyphicon glyphicon-remove-sign del-icon" id="delIcon"></i>
                                            <img src="{$vo.avatar??'/static/avatar.jpg'}" alt="" class="person-items-pic">
                                            <p class="person-items-name-add">{$vo.name}</p>
                                            <p class="person-items-dpm-add">{$vo.department_name}</p>
                                        </div>
                                        {/volist}
                                    </div>
                                    <!-- {if condition="empty($users_next_add)"} -->
                                    
                                    <!-- {/if} -->
                                    <div class="empty" id="empty3" >
                                        <img src="__STATIC__/upload/empty.png" alt="">
                                        <p>暂无数据~</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
<!-- 本月考核弹窗 -->
<div id="delTipwindow" style="display: none">
    <div class="current-month-person-del">
        <!-- 插入弹框人员模板 -->
    </div>
    <div class="save-cancel">
        <button class="layui-btn layui-btn-normal" id="saveDel">保存</button>
        <button class="layui-btn layui-btn-primary" id="cancelDel">取消</button>
    </div>
</div>

<script src="__STATIC__/web/js/template-web.js"></script>

<!-- 弹框内人员模板 -->
<script type="text/html" id="delWindowPerson">
    {{each data value}}
    <div class="person-items-del" data-id="{{ value.user_id }}">
        <i class="glyphicon glyphicon-remove-sign del-icon" id="delIcon"></i>
        <img src="{{ value.avatar }}" alt="" class="person-items-del-pic">
        <p class="person-items-del-name">{{ value.name }}</p>
        <p class="person-items-del-dpm">{{ value.department_name }}</p>
    </div>
    {{/each}}
</script>

<!-- 搜索当月人员 -->
<script type="text/html" id="searchPerson">
    {{each list value}}
    <div class="person-items" data-id="{{value.user_id}}">
        <img src="{{value.avatar}}" alt="" class="person-items-pic">
        <p class="person-items-name">{{value.name}}</p>
        <p class="person-items-dpm">{{value.department_name}}</p>
    </div>
    {{/each}}
</script>

<!-- 添加至下月新增人员模板 -->
<script type="text/html" id="addNextPerson">
    {{each data value}}
    <div class="person-items-add marks" data-id="{{value.user_id}}">
        <i class="glyphicon glyphicon-remove-sign del-icon" id="delIcon"></i>
        <img src="{{value.avatar}}" alt="" class="person-items-pic">
        <p class="person-items-name-add">{{value.name}}</p>
        <p class="person-items-dpm-add">{{value.department_name}}</p>
    </div>
    {{/each}}
</script>

<!-- 人员删除 / 分页 -->
<script>
    $(function () {
        // 列表部分 全选
        $('input[type="checkbox"].minimal, input[type="radio"].minimal').iCheck({
            checkboxClass: 'icheckbox_minimal-blue',
            radioClass: 'iradio_minimal-blue'
        });
        $('.checkbox-toggle').on('ifChecked', function (event) {
            var _this = $(this);
            var _table = _this.closest('.table');
            _table.find("tr td input[type='checkbox']").iCheck("check");
        });
        $('.checkbox-toggle').on('ifUnchecked', function (event) {
            var _this = $(this);
            var _table = _this.closest('.table');
            _table.find("tr td input[type='checkbox']").iCheck("uncheck");
        });

        // 侧边样式切换
        $("#leftBar ul").on("click", "li", function () {
            var id = $(this).attr('data-id');
            var url = "{:url('config')}" + '/id/' + id;
            window.location.href = url;
            // $(this).addClass("change").siblings().removeClass("change")
        })

        // 下月不参与考核人数
        var nextPersonNum = $(".next-month-person-not").children(".person-items-not").length;
        $("#nextNotNum").html(nextPersonNum)
        if(nextPersonNum) {
            $("#empty2").hide()
        }else {
            $("#empty2").show()
        }
        // 下月新增考核人数
        var nextAddPersonNum = $(".next-month-person-add").children(".person-items-add").length;
        $("#nextAddNum").html(nextAddPersonNum)
        if(nextAddPersonNum) {
            $("#empty3").hide()
        }else {
            $("#empty3").show()
        }
        // tab栏切换
        $("#tabs").on("click", "li", function () {
            var index = $(this).index()
            // console.log(index);
            if (index == 0) {
                $("#tabConfig").show().siblings("#tabPerson").hide();
            } else if (index == 1) {
                $("#tabPerson").show().siblings("#tabConfig").hide();
            }
        })

        // 本月删除人员弹出层
        layui.use('layer', function () {
            var layer = layui.layer;
        });

        var domIndex;
        // 本月删除按钮
        $("#delPerson").on("click", function () {
            let a = $("#users_data").children(".person-items").length
            if(!a) {
                    $("#personTip").slideDown(200).delay(1500).slideUp(200);
            }else {
                domIndex = layer.open({
                    type: 1,
                    content: $(
                        '#delTipwindow'), //这里content是一个DOM，注意：最好该元素要存放在body最外层，否则可能被其它的相对元素所影响
                    area: ['700px', '500px'],
                    title: '删除人员',
                    // 右上角×
                    cancel: function (index, layero) {
                        $("#delTipwindow").hide()
                        layer.close(domIndex)

                    }
                });
                var currentId = $("#currentId").val()

                // 发起删除人员弹框请求
                $.ajax({
                    url: "{:url('del_user_list')}",
                    type: 'get',
                    data: {
                        // 本月配置id
                        id: currentId
                    },
                    success: function (res) {
                        console.log(res,1111);
                        if (res.code == 0) {
                            // 模板
                            let str = template("delWindowPerson", res)
                            $(".current-month-person-del").html(str)
                        }
                    }
                })
            }
        })

        var delPersons = []
        // 本月删除人员弹出层内的删除
        $(".current-month-person-del").on("click", "#delIcon", function () {
            $(this).parents(".person-items-del").hide()
            // 获取到id
            let id = $(this).parents(".person-items-del").attr("data-id")
            // console.log(id);
            delPersons.push(id)
        })
    
        // 本月弹窗内保存按钮
        var nextId = $("#nextId").val();
        $("#saveDel").on("click", function () {
            layer.close(domIndex)
            $("#delTipwindow").hide();

            var nextId = $("#nextId").val();
            // console.log(nextId);
            // 保存删除请求
            $.ajax({
                url: "{:url('del_user_submit')}",
                type: 'post',
                data: {
                    next_id: nextId,
                    ids: delPersons
                },
                success: function (res) {
                    if(res.code == 0){
                        let html = '';
                        res.data.forEach(val => {
                            html += '<div class="person-items-not marks" data-id="'+ val.user_id +'">\n' +
                                '<i class="glyphicon glyphicon-remove-sign del-icon" id="delIcon"></i>\n' +
                                '<img src="' + val.avatar + '" alt="" class="person-items-pic">\n' +
                                '<p class="person-items-name-not">' + val.name + '</p>\n' +
                                '<p class="person-items-dpm-not">'+ val.department_name +'</p>\n' +
                                '</div>';
                        });
                        $('#next-month-person-not').append(html);
                        delPersons.length = 0;
                        // 下月不参与考核人数
                        var nextPersonNum = $(".next-month-person-not").children(".person-items-not").length;
                        $("#nextNotNum").html(nextPersonNum)
                        if(nextPersonNum) {
                            $("#empty2").hide()
                        }
                    }
                }
            })
        })

        // 本月弹窗取消按钮
        $("#cancelDel").on("click", function () {
            layer.close(domIndex)
            $("#delTipwindow").hide()

        })

        // 下月考核人员删除按钮
        $("#nextMonthPerson").on("click", function () {
            // 下月不参与考核
            var nextperson1 = $(".next-month-person-not").children(".person-items-not").length;
            // 下月新增人员考核
            var nextperson2 = $(".next-month-person-add").children(".person-items-add").length;
            // console.log(nextperson1, nextperson2);
            if (nextperson1 || nextperson2) {
                
                $(this).parents(".add-del-config").hide().siblings(".next-save-cancel").show();
                $(".next-month-person-not").children(".marks").addClass("del-change").children(".del-icon").show()
                $(".next-month-person-add").children(".marks").addClass("del-change").children(".del-icon").show()
            } else {
                $("#personTip").slideDown(200).delay(1500).slideUp(200)
            }
        })

        // 下月考核人员取消删除按钮
        $("#nextMonthCancelDel").on("click", function () {
            $(this).parents(".next-save-cancel").hide().siblings(".add-del-config").show();
            $(".next-month-person-not").children(".marks").removeClass("del-change").children(".del-icon").hide()
            $(".next-month-person-add").children(".marks").removeClass("del-change").children(".del-icon").hide()

            $("#next-month-person-not").children(".person-items-not").show()
            $("#next-month-person-add").children(".person-items-add").show()
        })

        // 删除未参与人员/新增人员id
        var nextMonthNot = [];
        var that1;
        // 下月未参与考核 删除人员删除icon
        $(".next-month-person-not").on("click", "#delIcon", function () {
            $(this).parents(".person-items-not").hide()
            that1 = $(this)
            // 下月不参与人员考核id
            var nextMonthNotId = $(this).parents().attr("data-id")
            console.log(nextMonthNotId);
            nextMonthNot.push(nextMonthNotId)
            nextMonthNot = Array.from(new Set(nextMonthNot))
        })

        var nextMonthAdd = [];
        var that2;
        // 下月新增人员考核 删除人员删除icon
        $(".next-month-person-add").on("click", "#delIcon", function () {
            $(this).parents(".person-items-add").hide()
            that2 = $(this)
            // 下月新增人员考核id
            var nextMonthAddId = $(this).parents().attr("data-id")
            nextMonthAdd.push(nextMonthAddId)
            nextMonthAdd = Array.from(new Set(nextMonthAdd))
        })

        // 删除下月参与 / 新增人员  保存按钮
        $("#nextMonthSaveDel").on("click", function() {
            $(this).parents(".next-save-cancel").hide().siblings(".add-del-config").show();
            $(".next-month-person-not").children(".marks").removeClass("del-change").children(".del-icon").hide()
            $(".next-month-person-add").children(".marks").removeClass("del-change").children(".del-icon").hide()
            
            var allChildDivNot = $(".next-month-person-not").children(".person-items-not")//找到addDiv下面的所有div
            var allChildDivAdd = $(".next-month-person-add").children(".person-items-add")//找到addDiv下面的所有div

            nextMonthNot.forEach(value => {
                for(let i = 0; i < allChildDivNot.length; i++){
                    if(allChildDivNot.eq(i).attr("data-id") == value) {
                        allChildDivNot.eq(i).remove()
                    }
                };
            })
            nextMonthAdd.forEach(value => {
                for(let i = 0; i < allChildDivAdd.length; i++){
                    if(allChildDivAdd.eq(i).attr("data-id") == value) {
                        allChildDivAdd.eq(i).remove()
                    }
                };
            })

            // 下月不参与考核人数
            var nextPersonNum = $(".next-month-person-not").children(".person-items-not").length;
            $("#nextNotNum").html(nextPersonNum)
            if( nextPersonNum ) {
                $("#empty2").hide()
            }else {
                $("#empty2").show()
            }
            // 下月新增考核人数
            var nextAddPersonNum = $(".next-month-person-add").children(".person-items-add").length;
            $("#nextAddNum").html(nextAddPersonNum)
            if( nextAddPersonNum ) {
                $("#empty3").hide()
            }else {
                $("#empty3").show()     
            }

            // 删除下月不参与 / 新增人员
            $.ajax({
                url: "{:url('del_next_user')}",
                type: 'post',
                data: {
                    ids_1: nextMonthAdd,
                    ids_2: nextMonthNot,
                    next_id: nextId 
                },
                success: function(res) {
                    
                }
            })
            
        })

        // 获取当月搜索姓名
        $("#searchBtn").on("click", function() {
            var currentId = $("#currentId").val()
            var searchName = $("#searchName").val()

            // 判断当前月数量
            $.ajax({
                url: "{:url('config_users_page')}",
                type: 'post',
                data: {
                    id: currentId,
                    name: searchName
                },
                success: function(res) {
                    console.log(res);
                    if(res.code == 0) {
                        let str = template("searchPerson", res.data)
                        $(".current-month-person").html(str)
                        var num = $(".current-month-person").children(".person-items").length
                        $("#currentNum").html(num)
                        if(num) {
                            $("#empty11").hide()
                        }else {
                            $("#empty11").show()
                        }
                        $("#searchName").val("")
                    }
                }
            })
        })
        
        // 渲染分页
        layui.use('laypage', function () {
            var laypage = layui.laypage;

            //执行一个laypage实例
            laypage.render({
                elem: 'paging' //注意，这里的 test1 是 ID，不用加 # 号
                    ,
                count: {$users_data.count}
                //数据总数，从服务端得到
                ,
                limit: '10',
                theme: '#1890FF',
                layout: ['count', 'prev', 'page', 'next', 'limit', 'refresh', 'skip'],
                jump: function (obj, first) {
                    console.log(obj);
                    if (!first) {
                        var limit = obj.limit;
                        var page = obj.curr;
                        var id = {$id};
                        var searchName = $("#searchName").val()
                        $.ajax({
                            url: "{:url('config_users_page')}",
                            data: {
                                id: id,
                                limit: limit,
                                page: page,
                                name: searchName
                            },
                            type: 'post',
                            success: function (data) {
                                if (data.code == 0) {
                                    data = data.data;
                                    // console.log(data);
                                    //删除元素
                                    $('#users_data').empty();
                                    //新增元素
                                    var html = '';
                                    for (i = 0; i < data.list.length; i++) {
                                        html +=
                                            '<div class="person-items" data-id="' +
                                            data.list.user_id + '">\n' +
                                            '<img src="' +
                                            data.list[i].avatar +
                                            '" alt="" class="person-items-pic">\n' +
                                            '<p class="person-items-name">' +
                                            data.list[i].name + '</p>\n' +
                                            '<p class="person-items-dpm">' +
                                            data.list[i].department_name +
                                            '</p>\n' +
                                            '</div>';
                                    }
                                    $('#users_data').append(html);
                                }
                            }
                        });
                        
                    }
                }
            });
        });
    });

    function change_status(id) {
        $.ajax({
            url: "{:url('change_status')}",
            type: 'post',
            data: {
                'id': id
            },
            success: function (res) {
                $.amaran({
                    'message': res.msg
                });
                if (res.err == 0) {
                    window.location.reload()
                }
            }
        });
    }
</script>

<!-- 添加人员部分 -->
<!-- Modal 弹出层重写 多选   -->
<div class="modal fade" id="myModal_multiple" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                    <h4 class="modal-title" id="myModalLabel10">人员选择</h4>
                </div>
                <div class="modal-body">
                    <div class="modal-left">
                        <div class="modal-left-title" style="margin-bottom: 20px;">
                            <div class="input-group">
                                <input type="text" name="search_user_name" class="form-control" placeholder="">
                                <span class="input-group-btn">
                                    <button class="btn btn-info search_btn" type="button"
                                        style="width: 47px; height: 34px; background-color: #1890FF;border: none;outline: none;"><span
                                            class="glyphicon glyphicon-search"></span></button>
                                </span>
                            </div>
                        </div>
                        <div class="input-group table-body">
                            <div class="table-left">
                                <div class="an_tree">
                                    <!-- 部门插入 -->
                                </div>
                            </div>
                            <div class="table-right">
                                <div class="an_tree_list">
                                    <div class="an_list_title">
                                        <!-- 部门人员插入 -->
                                    </div>
                                    <div class="an_list_con">
                                        <!-- <div class="an_list_item">
                                            <div class="item_info">
                                                <span class="name">aaa</span>/
                                                <span>88</span>/
                                                <span>部门</span>
                                            </div>
                                            <div class="item_box item_box_check"><i class="fa fa-check"></i></div>
                                        </div> -->
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="modal-right">
                        <div class="multiresult_header">
                            <div>已选择 <span class="number"> 0 </span> 个人</div>
                            <div class="header_clear">清空</div>
                        </div>
                        <div class="multiresult_list">
                            <!-- <div class="an_list_item">
                                <div class="item_info">
                                    <span class="name">aaa</span>/
                                    <span>88</span>/
                                    <span>部门</span>
                                </div>
                                <div class="item_box item_box_check"><i class="fa fa-check"></i></div>
                            </div> -->
                            
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-primary popups_submit" id="submit2">确认</button>
                </div>
            </div>
        </div>
</div>
<!-- 多选弹窗操作  -->
<script>
    var now_item_multiple="";//名字输入框
    var input_name="";
    $(".add_take").click(function(){
        $('#myModal_multiple').modal('show');
        now_item_multiple=$(this);
        input_name = "take[]";
        // new_right_add(); // 每次打开弹窗即添加至右侧已选人员中
        check_all();
    });
    $(".add_message_push").click(function(){
        $('#myModal_multiple').modal('show');
        now_item_multiple=$(this);
        input_name = "push[]";
        new_right_add();
    });
     //确认按钮
     var addNextIds = []
    $('#myModal_multiple .popups_submit').click(function (e) {
        $('#myModal_multiple').modal('hide');
        
        var check_all = $("#myModal_multiple .multiresult_list .an_list_item");
        var content="";
        for (let i = 0; i < check_all.length; i++) {
            var input_value = check_all.eq(i).attr("user_id");
            var input_limits_b = check_all.eq(i).attr("limits_b");
            var input_user_name = check_all.eq(i).attr("user_name");
            var input_user_num = check_all.eq(i).find(".item_info span").eq(1).html();
            var input_apart_name = check_all.eq(i).find(".item_info span").eq(2).html();
            content += '<input type="hidden" name="'+input_name+'" user_name="'+input_user_name+'" value="'+input_value+'" user_name="'+input_user_name+'" input_user_num="'+input_user_num+'" apart_name="'+input_apart_name+'" limits_b="'+input_limits_b+'">';
            addNextIds.push(input_value)
        }
        // console.log(addNextIds);

        now_item_multiple.siblings("input").remove();
        now_item_multiple.after(content);
        now_item_multiple.siblings("span").find("b").html(check_all.length);
        // var checked = $(".an_tree_list").find(".list_item_check");
        // now_item_name.val(checked.attr("user_name"));
        // now_item_id.val(checked.attr("user_id"));
        // now_item_name.attr("limits_b",checked.attr("limits_b"))
        
        var nextId = $("#nextId").val()
        // console.log(addNextIds);
        // 渲染至下月新增人员
        $.ajax({
            url: "{:url('add_user_submit')}",
            type: 'post',
            data: {
                ids: addNextIds,
                next_id: nextId
            },
            success: function(res) {
                if(res.code == 0) {
                    let str = template("addNextPerson", res)
                    $(".next-month-person-add").append(str)
                    // 下月新增考核人数
                    var nextAddPersonNum = $(".next-month-person-add").children(".person-items-add").length;
                    $("#nextAddNum").html(nextAddPersonNum)
                    if( nextAddPersonNum ) {
                        $("#empty3").hide()    
                    }
                    addNextIds.length = 0;
                }
                
            }
        })
       
    });

    //当弹窗关闭时执行重置弹窗
    $('#myModal_multiple').on('hidden.bs.modal', function () {
        //执行一些动作...重置弹窗
        $(".an_tree_list .an_list_title").html("");
        $(".an_tree_list .an_list_con").html("");
        
        $(".tree_txt_active").removeClass("tree_txt_active");
        $(".an_tree_pack").hide();
        $(".an_tree .fa").removeClass("fa-caret-down").addClass("fa-caret-right");
        $("#myModal_multiple input[name='search_user_name']").val("");
        $("#myModal_multiple .header_clear").click();

        
    });
    //已选择，再进行补充选择时添加右侧选中
    function new_right_add(){
        var input = now_item_multiple.siblings("input");
        var content = ""
        for (let i = 0; i < input.length; i++) {
            input.eq(i).attr("");
            content += '<div class="an_list_item " user_name="'+input.eq(i).attr("user_name")+'" user_id="'+input.eq(i).attr("value")+'" limits_b="'+input.eq(i).attr("limits_b")+'"><div class="item_info"><span class="name">'+input.eq(i).attr("user_name")+'</span>/<span>'+input.eq(i).attr("input_user_num")+'</span>/<span>'+input.eq(i).attr("apart_name")+'</span></div><div class="item_box "><i class="fa fa-remove"></i></div></div>'
        }
        $("#myModal_multiple .multiresult_list").append(content);
    }
</script>
<!-- 树结构js操作 多选  -->
<script>
    // checkbox
    $("#myModal_multiple .an_tree").on("click", ".fa", function () {
        $(this).toggleClass("fa-caret-down");
        $(this).toggleClass("fa-caret-right");
        $(this).parents(".an_tree_set").eq(0).children(".an_tree_pack").toggle();
    });
    //添加中间人员列表
    $("#myModal_multiple").on("click", ".an_tree_txt,.search_btn", function () {
        $(".an_tree").find(".tree_txt_active").removeClass("tree_txt_active");
        // console.log($(this));
        
        $(this).addClass("tree_txt_active");
        var department_id = $(this).attr("data_id");
        var department_name = $(this).html();
        // 搜索框内容
        var user_name = $("#myModal_multiple input[name='search_user_name']").val();
        // 获取本月配置id
        var currentId = $("#currentId").val()
        // 点击部门，请求到对应部门人员
        $.ajax({
            type: 'get',
            url: "{:url('add_user_list')}",
            data: {
                id: currentId,
                department_id: department_id,
                keyword: user_name
            },
            dataType:"json",
            success: function (res) {
                var content = '';
                var limits;
                var length = res.data.length
                if(length = 0){
                    limits = 0;
                }else{
                    limits = res.data.length;
                }
                $.each(res.data, function (index, value) {
                    content += '<div class="an_list_item" user_name="'+ value.name +'" user_id="'+value.user_id+'" limits_b="' + limits + '"><div class="item_info"><span class="name">' + value.name + '</span> / <span>' + value.job_number + '</span> / <span>' + value.department_name + '</span></div><div class="item_box "><i class="fa fa-check"></i></div></div>'
                });
                $('#myModal_multiple .an_list_con').html("");
                $('#myModal_multiple .an_list_con').append(content);
                $('#myModal_multiple .an_list_title').html('<div>' + department_name + ' ' + res.data.length + ' ' +'人</div><div class="all_item_box"><i class="fa fa-check"></i></div>');
                left_add_active();
                check_all();
            }
        })
    });
    // 选中事件
    $("#myModal_multiple .an_tree_list").on("click", ".an_list_item", function () {
        $(this).toggleClass("list_item_check");
        var ischeck = $(this).attr("class");
        if (ischeck.indexOf("list_item_check") >= 0) {
            add_check();
        } else {
            del_check($(this).attr("user_id"));
        }
        check_all();
    });
    //全选按钮
    $("#myModal_multiple .an_tree_list").on("click", ".all_item_box", function () {
        $(this).toggleClass("all_item_box_check");
        var ischeck = $(this).attr("class");
        var all_item = $("#myModal_multiple .an_tree_list .an_list_item");
        if (ischeck.indexOf("all_item_box_check") >= 0) {
            all_item.addClass("list_item_check");
            add_check();
        } else {
            all_item.removeClass("list_item_check")
            for (let i = 0; i < all_item.length; i++) {
                del_check(all_item.eq(i).attr("user_id"));
            }
        }
        check_all();
    });
    //右侧删除事件
    $("#myModal_multiple .multiresult_list").on("click", ".item_box", function () {
        var user_id = $(this).parents(".an_list_item ").attr("user_id");
        del_check(user_id);
        check_all();
    });
    //右侧清空监听
    $("#myModal_multiple .multiresult_header").on("click", ".header_clear", function () {
        var all_item = $("#myModal_multiple .multiresult_list .an_list_item");
        for (let i = 0; i < all_item.length; i++) {
            del_check(all_item.eq(i).attr("user_id"));
        }
        check_all();
    });
    //全选按钮检测
    function check_all(){
        var all_item_num = $("#myModal_multiple .an_tree_list .an_list_item").length;
        var checked_item_num = $("#myModal_multiple .an_tree_list .list_item_check").length;
        if(all_item_num != 0 && all_item_num == checked_item_num){
            $("#myModal_multiple .an_tree_list .all_item_box").addClass("all_item_box_check");
        }else{
            $("#myModal_multiple .an_tree_list .all_item_box").removeClass("all_item_box_check");
        };
        //右侧选中人数统计
        var people_num = $("#myModal_multiple .multiresult_list .an_list_item").length;
        // console.log(people_num);
        
        $("#myModal_multiple .multiresult_header .number").html(people_num);
    };
    //添加右侧选中项
    function add_check(){
        var item_ids = [];
        var all_checked_item = $("#myModal_multiple .an_list_con").find(".list_item_check");
        var now_checker_item = $("#myModal_multiple .multiresult_list .an_list_item");
        for (let i = 0; i < now_checker_item.length; i++) {
            item_ids.push(now_checker_item.eq(i).attr("user_id"));
        }
        for (let i = 0; i < all_checked_item.length; i++) {
            var now_id = all_checked_item.eq(i).attr("user_id");
            if ( $.inArray(now_id,item_ids) < 0 ) {
                var new_item = all_checked_item.eq(i).prop("outerHTML");
                new_item = new_item.replace("fa-check","fa-remove");
                new_item = new_item.replace("list_item_check","");
                $("#myModal_multiple .multiresult_list").append(new_item);
            } 
        }
        // console.log(item_ids);
    }
    //左侧第一次生成时检测是否有选中项
    function left_add_active(){
        var left_item_ids = [];
        var left_checked_item = $("#myModal_multiple .an_list_con .an_list_item");
        var right_checker_item = $("#myModal_multiple .multiresult_list .an_list_item");
        for (let i = 0; i < left_checked_item.length; i++) {
            left_item_ids.push(left_checked_item.eq(i).attr("user_id"));
        }
        for (let i = 0; i < right_checker_item.length; i++) {
            var user_id = right_checker_item.eq(i).attr("user_id");
            if ( $.inArray(user_id,left_item_ids) >= 0 ) {
                $("#myModal_multiple .an_list_con .an_list_item[user_id="+user_id+"]").addClass("list_item_check");
            }
        }  
    }
    //取消选中项
    function del_check(user_id){
        var left_item_ids = [];
        var right_item_ids = [];
        var left_checked_item = $("#myModal_multiple .an_list_con .an_list_item");
        var right_checker_item = $("#myModal_multiple .multiresult_list .an_list_item");
        for (let i = 0; i < left_checked_item.length; i++) {
            left_item_ids.push(left_checked_item.eq(i).attr("user_id"));
        }
        for (let i = 0; i < right_checker_item.length; i++) {
            right_item_ids.push(right_checker_item.eq(i).attr("user_id"));
        }
        if ( $.inArray(user_id,left_item_ids) >= 0 ) {
           $("#myModal_multiple .an_list_con .an_list_item[user_id="+user_id+"]").removeClass("list_item_check");
        }
        if ( $.inArray(user_id,right_item_ids) >= 0 ) {
            $("#myModal_multiple .multiresult_list .an_list_item[user_id="+user_id+"]").remove();
        }
    }
</script>
<!-- 递归填充目录 多选  -->
<script>
    // 请求部门目录
    var department = "";
    $.ajax({
        type: 'get',
        url: "{:url('base/base_department_page')}",
        dataType:"json",
        async: false,
        success: function (data) {
            // eventList = JSON.parse(data);
            department = data;
        }
    })
    var an_tree = ergodic(department)
    
    $("#myModal_multiple .an_tree").append(an_tree);

    function ergodic(data) {
        var content = '';
        $.each(data, function (index, value) {
            if (value.children != "") {
                var children = ergodic(value.children);
                content += '<div class="an_tree_set"><div class="an_tree_entry"><div class="an_tree_main"><span class="an_tree_icon"><i class="fa fa-caret-right"></i></span><span class="an_tree_txt" data_id="' + value.id + '" data_pid="' + value.pid + '">' + value.title + '</span></div></div><div class="an_tree_pack">' + children + '</div></div>';
            } else {
                content += '<div class="an_tree_set"><div class="an_tree_entry"><div class="an_tree_main"><span class="an_tree_icon"></span><span class="an_tree_txt" data_id="' + value.id + '" data_pid="' + value.pid + '">' + value.title + '</span></div></div><div class="an_tree_pack"></div></div>';
            }
        });
        return content;
    }
</script>

<!-- an任务配置删除和恢复 -->
<script>
    $(".rwpz_del").click(function (e) { 
        // e.preventDefault();
        var id = $(this).parents("li").eq(0).attr("data-id");
        var url = "{:url('company/config')}";
        $.ajax({
            url:"{:url('change_status')}",
            type:'post',
            data:{'id':id},
            success:function (res) {
                $.amaran({'message':res.msg});
                if(res.err == 0){
                    window.location.reload();
                    // $.pjax({url: url, container: '#pjax-container', fragment:'#pjax-container'});
                }
            }
        })
        // console.log(id);
        event.stopPropagation();//阻止事件冒泡，只触发当前点击
    });
    $(".rwpz_res").click(function (e) { 
        // e.preventDefault();
        var id = $(this).parents("li").eq(0).attr("data-id");
        var url = "{:url('company/config')}";
        $.ajax({
            url:"{:url('change_status')}",
            type:'post',
            data:{'id':id},
            success:function (res) {
                $.amaran({'message':res.msg});
                if(res.err == 0){
                    window.location.reload();
                    // $.pjax({url: url, container: '#pjax-container', fragment:'#pjax-container'});
                }
            }
        })
        // console.log("恢复");
        event.stopPropagation();//阻止事件冒泡，只触发当前点击
    });
</script>

{/block}